<template>
	<view class="content">
		<view class="headerbg">
			<image class="imagebg" :src="proxy.serverimageUrl + 'myPage/headerbg.png'" mode=""></image>
		</view>
		<view class="contentBox">
			<!-- <view class="avatarBox">
				<image class="avatarimg" v-if="userdata.avatarImg" :src="userdata.avatarImg" mode=""></image>
				<view class="name" v-if="userdata.nickname">
					{{userdata.nickname}}
				</view>
			</view> -->
			<!-- @click="avatarchange" -->
			<view class="avatarBox">
				<!-- <image :src="proxy.serverimageUrl + 'myPage/avatar.png'" mode=""></image> -->
				<image :src="proxy.serverimageUrl + 'myPage/footLogo.png'" mode=""></image>
				<view class="name">
					童安娜商城
				</view>
			</view>
			<view class="tabBox">
				<p class="title">我的订单</p>
				<view class="tabitem">
					<view class="itemBox" @click="goorderlist(item.id)" v-for="(item,index) in tabdata" :key="index">
						<image class="tabicon" :src="(proxy.serverimageUrl  + 'myPage/' + item.imgurl)" mode=""></image>
						<p class="tabtitle">{{item.title}}</p>
						<view class="badgeBox">
							<up-badge v-if="item.count" shape="horn" :type="type" max="99"
								:value="item.count"></up-badge>
						</view>
					</view>
				</view>
			</view>
			<view class="otherBox">
				<p class="othertitle">其他功能</p>
				<view @click="otherpage(item)" v-for="(item,index) in otherData" :key="index">
					<view class="otherItem" v-if="item.id != 2">
						<view class="item-left">
							<image class="icons" :src="(proxy.serverimageUrl  + 'myPage/' + item.imgurl)" mode="">
							</image>
							<view class="text">
								{{item.text}}
							</view>
						</view>
						<image class="back" :src="proxy.serverimageUrl + 'myPage/back.png'" mode=""></image>
					</view>
					<view class="otherItem"  v-if="item.id ==2">
						<view class="item-left" style="width: 90%;">
							<image class="icons" :src="(proxy.serverimageUrl  + 'myPage/' + item.imgurl)" mode="">
							</image>
							<button class="btn" open-type="contact">微信客服
							</button>
						</view>
						<image class="back" :src="proxy.serverimageUrl + 'myPage/back.png'" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<up-popup :round="15" mode="center" :show="upopshow" class="upopup" @close="close" @open="open">
			<p class="p1">设置头像和微信名</p>
			<view class="avatarBox">
				<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar' class="btns">
					<image class="avatarimage" :src="userdata.avatarImg" mode=""></image>
				</button>
			</view>
			<view class="userNameBox">
				<view class="text">微信名</view>
				<view class="username">
					<input style="font-size: 28rpx;" type="nickname" @blur="blurname" v-model="userdata.username"
						placeholder="请输入昵称">
				</view>

			</view>
			<view class="btnadd" @click="loginFun">
				保存设置
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		myOrderStatusCount
	} from '../../utils/api.js'
	import BASE_URL from '@/utils/env.js' //引入接口共用地址 //引入仓库，使用的是pinia
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		proxy,
		ctx
	} = getCurrentInstance()
	console.log(proxy.serverimageUrl);
	onLoad((o) => {
		// logincode()
	})
	onShow(() => {
		orderstatucount()
	})
	const otherpage = (item) => {
		console.log(item.id);
		if (item.id == 1) {
			uni.setStorageSync('ids','')
			uni.setStorageSync('orderbuy','')
			uni.navigateTo({
				url: '/subpages/AddressManagement/index'
			})
		}else if(item.id == 3){
			uni.navigateTo({
				url: '/subpages/user/privacy'
			})
		}
	}
	const countdata = ref({})
	const orderstatucount = () => {
		let params = {
			openid: uni.getStorageSync('openid'),
			sid: uni.getStorageSync('sid')
		}
		myOrderStatusCount(params).then(res => {
			tabdata.map((item, index) => {
				if (item.title == '待发货') {
					item.count = res.data.toBeShipped
				} else if (item.title == '运输中') {
					item.count = res.data.toBeReceived
				} else if (item.title == '退换货') {
					item.count = res.data.returns
				}else if(item.title == '待付款'){
					item.count = res.data.pendingPayment
				}
			})
			if(res.data.parents){
				userdata.value.avatarImg = res.data.parents.plogo
				userdata.value.nickname = res.data.parents.pname
				countdata.value = res.data
			}
		})
	}
	const baseUrl = BASE_URL
	const userdata = ref({
		avatarImg: '',
		nickname: ''
	})
	const logincode = () =>{
		uni.login({
			"provider": "weixin",
			success: function(loginRes) {
				// 登录成功
				let code = loginRes.code
				uni.getUserInfo({
					provider: 'weixin',
					success: function(info) {
						uni.request({
							url: baseUrl + '/tong_anna/getWxOpenID',
							data: {
								code: code,
							},
							method: 'POST',
							success: (res) => {
								if (res.data.code === 200) {
									uni.setStorageSync('openid', res.data
										.data)
									upopshow.value = false
								} 
								// else {
								// 	uni.showModal({
								// 		title: res.data.msg
								// 	})
								// }
								//获得token完成登录
								// uni.setStorageSync('token',res.token)
							}
						});
					}
				})
			},
			fail: function(err) {
				// 登录授权失败  
				// err.code是错误码
			}
		
		})
	}
	/*徽标显示状态*/
	const type = ref('error');
	/*徽标显示数量*/
	const value = ref(100);
	/*订单栏tab数据*/
	const tabdata = reactive([
		{
			imgurl: 'obligation.png',
			title: '待付款',
			id: 0
		},
		{
			imgurl: 'fahuotab.png',
			title: '待发货',
			id: 1
		},
		{
			imgurl: 'yunshutab.png',
			title: '运输中',
			id: 2
		},
		{
			imgurl: 'wanchengtab.png',
			title: '已完成',
			id: 3
		},
		{
			imgurl: 'tuihuanhuo.png',
			title: '退换货',
			id: 4
		}
	])
	/*跳转到订单列表*/
	const goorderlist = (id) => {
		uni.navigateTo({
			url: '/subpages/orderlist/index?current=' + id
		})
	}
	/*其他选择项数据*/
	const otherData = reactive([{
			imgurl: 'addressicon.png',
			text: '收货地址',
			id: 1
		},
		{
			imgurl: 'customerservice.png',
			text: '客服',
			id: 2
		},
		{
			imgurl: 'privacy.png',
			text: '隐私条款',
			id: 3
		},
	])
	/*微信名事件*/
	const blurname = (e) => {
		userdata.value.nickname = e.detail.value
	}
	const loginFun = () => {
		if (userdata.value.avatarImg == '' && userdata.value.nickname == '') {
			uni.showToast({
				title: '请选择头像和名字',
				icon: 'error',
				duration: 1500
			})
			return
		} else {
			uni.login({
				"provider": "weixin",
				success: function(loginRes) {
					// 登录成功
					let code = loginRes.code
					console.log(loginRes);
					uni.getUserInfo({
						provider: 'weixin',
						success: function(info) {
							uni.request({
								url: baseUrl + '/tong_anna/getWxOpenID',
								data: {
									code: code,
									pname: userdata.value.nickname,
									avatar: userdata.value.avatarImg
								},
								method: 'POST',
								success: (res) => {
									if (res.data.code === 200) {
										uni.setStorageSync('openid', res.data
											.data)
										upopshow.value = false
										// _that.headershow = true
									} else {
										uni.showModal({
											title: res.data.msg
										})
									}
									//获得token完成登录
									// uni.setStorageSync('token',res.token)
								}
							});
						}
					})
				},
				fail: function(err) {
					// 登录授权失败  
					// err.code是错误码
				}

			})
		}

	}
	/*弹框显示*/
	const upopshow = ref(false)
	const close = () => {
		upopshow.value = false
	}
	const open = () => {
		upopshow.value = true
	}
	const avatarchange = () => {
		upopshow.value = true
	}
	/*input绑定值*/
	const username = ref('')
	/*选择头像点击事件*/
	const onChooseAvatar = (e) => {
		let avaterurl = e.detail.avatarUrl
		uni.uploadFile({
			url: baseUrl + '/common/upload',
			filePath: avaterurl, //头像文件
			name: 'file',
			success: (uploadFileRes) => {
				let data = JSON.parse(uploadFileRes.data)
				userdata.value.avatarImg = data.url
				console.log(userdata.value.avatarImg);
			}
		});
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F2F2F2;
		width: 100vw;
		height: 100vh;

		.headerbg {
			width: 100%;
			position: relative;

			.imagebg {
				width: 100%;
				height: 574rpx;
				position: absolute;
				top: 0;
				z-index: 1;
			}

		}

		.contentBox {
			position: relative;
			z-index: 11;
			padding: 194rpx 30rpx 0;

			.avatarBox {
				display: flex;
				align-items: center;

				image {
					width: 220rpx;
					height: 220rpx;
				}

				.avatarimg {
					border-radius: 50%;
				}

				.name {
					font-family: SourceHanSansSC;
					font-weight: 500;
					font-size: 42rpx;
					color: #FFFFFF;
					margin-left: 30rpx;
				}
			}

			.tabBox {
				margin-top: 60rpx;
				width: 100%;
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.title {
					font-family: SourceHanSansSC;
					font-weight: 500;
					font-size: 32rpx;
					color: #303030;
				}

				.tabitem {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.itemBox {
						text-align: center;
						position: relative;

						.tabicon {
							width: 88rpx;
							height: 88rpx;
						}

						.tabtitle {
							font-family: SourceHanSansSC;
							font-weight: 400;
							font-size: 28rpx;
							color: #303030;
						}

						.badgeBox {
							position: absolute;
							top: 0;
							right: -30rpx;
						}
					}
				}
			}

			.otherBox {
				background: #FFFFFF;
				margin-top: 30rpx;
				border-radius: 20rpx;
				padding: 30rpx;

				.othertitle {
					font-family: SourceHanSansSC;
					font-weight: 500;
					font-size: 32rpx;
					color: #303030;
				}

				.otherItem {
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btn {
						padding: 0;
						background: #ffffff;
						font-size: 28rpx;
						margin: 0;
						width: 95%;
						text-align: left;
					}

					.btn::after {
						border: none;
					}

					.item-left {
						display: flex;
						align-items: center;

						.icons {
							width: 54rpx;
							height: 54rpx;
						}

						.text {
							font-family: SourceHanSansSC;
							font-weight: 400;
							font-size: 28rpx;
							color: #303030;
						}
					}

					.back {
						width: 13rpx;
						height: 24rpx;
					}
				}
			}
		}

		::v-deep .u-popup {

			.u-popup__content {
				box-sizing: border-box;
				padding: 50rpx 45rpx;

				.p1 {
					// margin-top: 50rpx;
					text-align: center;
					font-family: Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 36rpx;
					color: #303030;
				}

				.avatarBox {
					margin-top: 70rpx;
					width: 100%;

					.btns {
						width: 142rpx;
						height: 142rpx;
						padding: 0;
						border: none;
						text-align: center;
						background-color: #fff;

						.avatarimage {
							width: 100% !important;
							height: 100% !important;
						}
					}
				}

				.userNameBox {
					margin-top: 50rpx;
					box-sizing: border-box;
					padding: 0 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;


					.text {
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 32rpx;
						color: #303030;

					}

					.username {
						margin-left: 20rpx;
					}
				}

				.btnadd {
					margin: 40rpx auto 0;
					width: 480rpx;
					height: 95rpx;
					background: #013CAA;
					border-radius: 16rpx;
					display: flex;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					align-items: center;
					justify-content: center;
				}
			}


		}
	}
</style>